<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改姓名</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { ref } from "vue";
  let name = ref('zqs')
  let age = 18
  let tel = '18218392088'
  let address = '西安天谷七路'

  /* Ref的实例对象 */
  /* RefImpl {dep: Dep, __v_isRef: true, __v_isShallow: false, _rawValue: 'zqs', _value: 'zqs'} */
  console.log(name);
  /* 普通的字符串 */
  console.log(tel);


  function changeName() {
      name.value = 'zhangsan' /* js里改变ref的值需要.value，模板使用不需要.value */
    }
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0px 1px 2px #ddd;
  border-radius: 10px;
  padding: 20px;
}
</style>
